<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="12">
                <Card>
                    <p slot="title" style="height:25px;">
                        <Icon type="plus-round"></Icon> 新增管理员
                    </p>
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                        <Form-item label="姓名" prop="name">
                            <Input v-model="formValidate.username" placeholder="Enter..."></Input>
                        </Form-item>
                        <Form-item label="手机号" prop="mobile">
                            <Input v-model="formValidate.mobile" placeholder="Enter..."></Input>
                        </Form-item>
                        <Form-item label="邮箱" prop="email">
                            <Input v-model="formValidate.email" placeholder="Enter..."></Input>
                        </Form-item>
                        <Form-item label="密码" prop="password">
                            <Input v-model="formValidate.password" type="password" placeholder="Enter..."></Input>
                        </Form-item>

                        <Form-item>
                            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                        </Form-item>
                    </Form>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    import qs from 'qs'
    export default {
        data () {
            const valideMobile = (rule, value, callback) => {
                var re = /^1[34578]\d{9}$/;
                if (!re.test(value)) {
                    callback(new Error('请输入正确格式的手机号'));
                } else {
                    callback();
                }
            };
            return {
                formValidate: {
                    username: '',
                    mobile: '',
                    email: '',
                    password: ''
                },
                ruleValidate: {
                    username: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { type: 'string', max: 11, message: '手机号为11位', trigger: 'blur' },
                        { validator: valideMobile, trigger: 'blur' }
                    ],
                    email: [
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' },
                        { type: 'string', max: 20, message: '密码最多20位', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.post('admin/admin/add', this.$qs.stringify(this.formValidate)).then((res) => {
                            var d = res.data;
                            if (d.code == 0) {
                                this.$Notice.success({
                                    title: 'Success',
                                    desc: '操作成功'
                                });
                                this.$router.push({
                                    name: 'adminList'
                                });
                            } else {
                                this.$Notice.error({
                                    title: 'Error Warning',
                                    desc: `Error：${d.msg}<br>`
                                });
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
